<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无限滚动动画</title>

    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
    <h1 style="text-align: center;">无限水平滚动动画</h1>

    <h2>无滚动动画</h2>
    <div class="scroller">
        <ul class="tag-list scroller__innter">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Vue</li>
            <li>Java</li>
            <li>Netty</li>
            <li>SpringBoot</li>
        </ul>
    </div>

    <h2>向左滚动</h2>
    <div class="scroller" data-animate="true">
        <ul class="tag-list scroller__innter">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Vue</li>
            <li>Java</li>
            <li>Netty</li>
            <li>SpringBoot</li>
        </ul>
    </div>

    <h2>向右滚动</h2>
    <div class="scroller" data-animate="true" data-direction="right">
        <ul class="tag-list scroller__innter">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Vue</li>
            <li>Java</li>
            <li>Netty</li>
            <li>SpringBoot</li>
        </ul>
    </div>

    <h2>向左滚动 快</h2>
    <div class="scroller" data-animate="true" data-duration="fast">
        <ul class="tag-list scroller__innter">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Vue</li>
            <li>Java</li>
            <li>Netty</li>
            <li>SpringBoot</li>
        </ul>
    </div>

    <h2>向右滚动 慢</h2>
    <div class="scroller" data-animate="true" data-direction="right" data-duration="slow">
        <ul class="tag-list scroller__innter">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Vue</li>
            <li>Java</li>
            <li>Netty</li>
            <li>SpringBoot</li>
        </ul>
    </div>

    <h2>图片 向右滚动 快</h2>
    <div class="scroller" data-animate="true" data-direction="right" data-duration="fast">
        <ul class="tag-list scroller__innter">
            <li><img src="./images/01.jpeg" /></li>
            <li><img src="./images/02.jpeg" /></li>
            <li><img src="./images/03.jpeg" /></li>
            <li><img src="./images/04.jpeg" /></li>
            <li><img src="./images/05.jpeg" /></li>
            <li><img src="./images/06.jpeg" /></li>
            <li><img src="./images/07.jpeg" /></li>
        </ul>
    </div>

    <h2>图片 向左滚动 快</h2>
    <div class="scroller" data-animate="true" data-direction="left" data-duration="fast">
        <ul class="tag-list scroller__innter">
            <li><img src="./images/01.jpeg" /></li>
            <li><img src="./images/02.jpeg" /></li>
            <li><img src="./images/03.jpeg" /></li>
            <li><img src="./images/04.jpeg" /></li>
            <li><img src="./images/05.jpeg" /></li>
            <li><img src="./images/06.jpeg" /></li>
            <li><img src="./images/07.jpeg" /></li>
        </ul>
    </div>
    
    
    <script src="./index.js"></script>
</body>
</html>